With the experience gained from the Calvin Klein Newsletter, we felt we could take the new capabilities of Macromedia Flash MX to the next level…e-commerce. When we were approached by Clyde’s Chemist to build an e-commerce website we were very excited at the opportunity. We showed them what we could do with Macromedia Flash MX and how it could be applied to an e-commerce shopping experience. They loved the idea.

Logistics of E-commerce
Before a line of code was ever written we had to address all of the logistics of building an e-commerce website. Not only were we dealing with product inventory, user accounts, and personal information but also shipping and credit card verification within the Macromedia Flash MX environment. We really wanted to make the shopping experience seamless from start to finish without using HTML. We determined that the role of Macromedia Flash MX was to function only as the client interface which would communicate with the server using ASP.NET.

The e-commerce architecture was broken down into four business objects. Each business object would handle specific functions in the purchasing process.

Communicating with Macromedia Flash MX
When the components were finished, we began to take our first steps at communicating between Macromedia Flash MX and the database. At this point, the database had already been populated with products and queries were working between ASP.NET and the database. Pulling the data from the database was very easy in Macromedia Flash MX. It all boiled down to a simple loadVariables command as shown below:

When developing the website, one of the major issues was compatibility. The client wanted to be able to reach as many people as possible. This meant it had to work in all major browsers on both PC and Mac platforms. One of the biggest problems we had with this was JPEG loading. Over slower connections AOL will convert the JPG format into the more compressed ART file format for faster download speeds. This is a problem for Macromedia Flash Player because it cannot load the ART file format. The only fix for this problem was to change the file extension of the JPG to something else (such as FPG). This tricks AOL and the FPG file is not compressed. Macromedia Flash MX can still read the FPG as a JPG and the player can import the image.

In order for the user to shop on the website, site visitors must have cookies enabled on their computer. When the user enters the website, a cookie is stored on the client’s computer. The contents of the user’s shopping bag are stored on the server and the cookie on their computer associates their computer to the shopping bag on the server. When the user registers, a persistent cookie is written to their computer to identify them when they return to the site.

Selecting a product will enlarge the image and display the product detail information (figure 4). Customers can then select sizes, colors, quantities and add items to their shopping bag. Every time the user adds products to their shopping bag, the information on the server is updated. This is to ensure that the information is synchronized between what the user sees and what is stored on the server. Like all other queries to the server, Macromedia Flash MX merely asks for the data and waits to display whatever it receives. This is an example of the query sent to the server to obtain the contents of the shopping bag (figure 5):

Once the user has seen and updated quantities of their shopping bag, they have the option to either make a purchase or continue shopping. If they choose to purchase the contents of their cart, they can either create a new account or sign into an existing account. Once the user has created a new account, the contents of their shopping bag are associated with their new account through a username and password (figure 6).

Rather than Macromedia Flash MX directly requesting the shipping cost from UPS, the request is first sent to the server, then routed to UPS, then back to ASP.NET, and then back to Macromedia Flash MX. This is to ensure that the everything is synchronized between Macromedia Flash MX and the server. It’s important that Macromedia Flash MX is only the interface, we don't want it to do any unnecessary calculations that can be handled by the server more efficiently. When the shipping cost is returned to Macromedia Flash MX, it also receives the subtotal, tax, and total for the purchase. At this point, the user can officially make the purchase and verify their credit card (figure 8). To do this, Macromedia Flash MX sends this request:

Once again, Macromedia Flash MX uses ASP.NET to communicate with the server. When the purchase is actually made, ASP.NET sends the purchase and credit card information to Authorize.net for verification. When the card is verified, the approval is returned to Macromedia Flash MX and the customer sees the order confirmation page. At this point, the user has the option to print an invoice for their order directly from Macromedia Flash MX. A copy of the invoice is also e-mailed to the user and another is sent to Clyde’s for order fulfillment and shipment.

Final Thoughts
Clyde’s Online shows what can be done using Macromedia Flash MX to take e-commerce to the next level—no more boring HTML credit card forms or static pages.

In the future, the challenge will be to improve the efficiency of communicating between Macromedia Flash MX and the server, as well as finding other ways to make the application perform faster. We want to find a way to create a dynamic e-commerce site using Macromedia Flash MX that enhances the shopping experience without adding extra wait time for customers.

As computers continue to become faster and Macromedia Flash MX is bundled with more systems and browsers, I'm certain we'll see more and more businesses opting for Macromedia Flash MX e-commerce sites—not only for the cool factor, but because of the way Macromedia Flash MX can enhance online shopping with intuitive navigation, more interaction with the products, and an overall richer experience.

About the authors
Ryan Thomas is responsible for producing and managing projects at Firstborn. As executive producer, he makes sure clients objectives are met, in terms of design and functionality, schedule and cost. Ryan has been with Firstborn for 3 years. He brings his knowledge of design and technology to his role as producer, he has been involved in every step of our working process from project start to finish. Ryan has a Graphic Design degree from Kansas State University. He lives in New York City.

Shea Gonyo is senior developer at Firstborn and has worked there for three years. As senior developer, his role is to create rich media applications for the web and cd-rom. He utilizes his background in print design, video, drawing and painting to create highly interactive and animated applications for high profile clients like Calvin Klein, Gucci and Ralph Lauren Fragrances. Shea graduated from the University of New York at Plattsburgh with a BA of Fine Arts.